<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      unique-opened
      @select="handleSelect"
    >
      <template v-for="(item, index) in items">
        <template
          v-if="Array.isArray(item.children) && item.children.length > 0"
        >
          <el-submenu :index="index + ''" :key="item.id">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span slot="title">{{ item.auth_name }}</span>
            </template>
            <template v-for="subItem in item.children">
              <!-- <el-submenu v-if="Array.isArray(subItem.children) && subItem.children.length>0"
                          :index="subItem.id+''"
                          :key="subItem.id">
                <template slot="title">{{ subItem.auth_name }}</template>
                <el-menu-item v-for="(threeItem,i) in subItem.children"
                              :key="i"
                              :index="threeItem.path">{{ threeItem.auth_name }}</el-menu-item>
              </el-submenu> -->
              <!-- v-else -->
              <el-menu-item :index="subItem.path" :key="subItem.id + ''">{{
                subItem.auth_name
              }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.path" :key="item.id">
            <i class="el-icon-s-grid"></i>
            <span slot="title">{{ item.auth_name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import bus from "@/common/bus";
import {findIndex} from 'lodash';
export default {
  data() {
    return {
      collapse: false,
      tabIndex: 0,
      items: [],
      onRoutes: "diseaseDepartment",
    };
  },
  created() {
    this.onRoutes =
      this.$route.path == "/"
        ? "diseaseDepartment"
        : this.$route.path.substring(1);
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
      bus.$emit("collapse-content", msg);
    });
    this.getAuthTree();
  },
  // watch: {
  //   $route:{
  //     deep:true,
  //     handler:function(to){
  //     console.log("sdf",to)
      
  //   }} 
  // },
  methods: {
    //获得权限树
    getAuthTree() {
      this.$http.post(this.$API.GET_AUTH_TREE, {}).then((res) => {
        if (res.code == 1) {
          let list = Array.isArray(res.data) ? res.data : [];
          this.items = list;
          // console.log('this.onRoutes',this.onRoutes);
          let keys=findIndex(list,o=>o.rule == this.onRoutes.toLowerCase());
          // console.log('keys',keys);
          if(keys>=0){
            this.handleSelect(this.onRoutes,[keys,this.onRoutes])
          }
          // if(this.$route.path == '/' || this.$route.path == 'diseaseDepartment'){
          //   console.log('*************',11)
          //   if(list.length>0 && Array.isArray(list[0].children) && list[0].children.length>0 && Array.isArray(list[0].children[0].children)){
          //     this.ruleMethod(list[0].children[0].children)
          //   }
          // }else{
          //   console.log('*************',22)
          //   let routerList=window.sessionStorage.getItem('RCBA_LIST');
          //   console.log('*************',routerList)
          //   if(routerList){
          //     let rule=[];
          //     try{
          //       rule=Array.isArray(JSON.parse(routerList))?JSON.parse(routerList):[];
          //     }catch(e){console.log(e)}
          //     this.ruleMethod(rule)
          //   }else{

          //     // this.handleSelect()
          //   }
          // }
        }
      });
    },
    handleSelect(key, keyPath) {
      // console.log('key',key);
      // console.log('keyPath',keyPath);
      if (
          Array.isArray(keyPath) &&
          keyPath.length > 0 &&
          Array.isArray(this.items[keyPath[0]].children)
        ) {
          this.items[keyPath[0]].children.forEach((item) => {
            if (item.path === key) {
              this.ruleMethod(item.children);
            }
          });
        }
      if (this.onRoutes != key) {
        this.onRoutes = key;
        
        this.$router.push({ path: "/" + key });
      }
      
    },
    ruleMethod(list) {
      console.log('list',list);
      if (Array.isArray(list)) {
        if(list.length>0){
          let roule = {};
          list.forEach((item) => {
            let key = item.rule.substring(item.rule.lastIndexOf(",") + 1);
            roule[key] = true;
          });
          this.$store.dispatch('app/setPageRcba', roule);
        }else{
          let raba=this.$store.state.raba;
          for(let i in raba){
            raba[i]=false;
          }
          this.$store.dispatch('app/setPageRcba', roule);
        }
        window.sessionStorage.setItem('RCBA_LIST',JSON.stringify(list))
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
